<template>
  <div class="home">
    <h1>home</h1>
    <hr>

    <h1>{{ count }} <button @click="SET_COUNT">+</button></h1>
    <div>
      <input type="text" v-model="task">
      <el-button @click="createTask">create</el-button>
    </div>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
      >
        <h2>{{ item.title }}</h2>
      </li>
    </ul>

  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      task: '',
      rangeValue: 24,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  computed: {
    ...mapState('app', ['list', 'count']),
    ...mapGetters([])
  },
  mounted() {
    // console.log(this.$store.state.app)
    // console.log(this.$store)
  },
  methods: {
    ...mapMutations('app', ['SET_COUNT', 'PUSH_ITEM_TO_LIST']),
    ...mapActions('app', ['setList']),
    createTask() {

      /*this.$store.dispatch('setList', {
        id: Math.uuid(),
        title: this.task
      })*/
      this.setList({
        id: Math.uuid(),
        title: this.task
      })

      this.task = ''

      /*this.$store.commit('PUSH_ITEM_TO_LIST', {
        id: Math.uuid(),
        title: this.task
      })*/
      /*this.PUSH_ITEM_TO_LIST({
        id: Math.uuid(),
        title: this.task
      })*/
    }
  }
}
</script>
